<template>
    <div class="my-container w-full h-full flex justify-center items-center bg-[#bbb9b9]">
        <div class="w-4/6 h-5/6 lg:h-3/6 text-xl lg:text-3xl lg:-mt-20">
            <div class="text-center mb-4 lg:mb-8 font-bold text-2xl lg:text-4xl">诊前检查</div>
            <div class="bg-white p-8 lg:p-12 rounded-2xl">
                <div>
                    <span class="text-[#808080] mr-4 lg:mr-8">姓名</span>
                    <span>{{patientInfo.name}}</span>
                </div>
                <div class="mt-8 lg:mt-12">
                    <span class="text-[#808080] mr-4 lg:mr-8">年龄</span>
                    <span>{{patientInfo.age}}</span>
                </div>
                <div class="mt-8 lg:mt-12">
                    <span class="text-[#808080] mr-4 lg:mr-8">性别</span>
                    <span>{{['未知','男','女'][patientInfo.sex]}}</span>
                </div>
            </div>
            <button class="my-btn w-full h-[60px] mt-8 lg:mt-12 lg:h-[80px]" @click="$router.push('/home')">开始检测</button>
        </div>
    </div>
</template>

<script setup>
import {ref,onUnmounted} from 'vue'
const patientInfo = ref(JSON.parse(window.localStorage.getItem('patientInfo') ?? "{}"))
const baseUrl = import.meta.env.BASE_URL



onUnmounted(()=>{
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
        audio.src = baseUrl + '/sources/home.mp3'
	    audio.muted = false;
	    audio.play();
    },200)
})
</script>

<style  scoped>
.my-btn{
  cursor: pointer;

  background: linear-gradient(to right, rgb(19, 167, 255), rgb(14,143,255));
  /* background: blue; */
  border-radius: 200px;
  border: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
}
</style>